<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9块半大满减</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link rel="shortcut icon" href="css/jian.png" type="image/x-icon" />
    <script src="js/layui/layui.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css" />
    <link rel="stylesheet" href="css/manjianstyle.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<body >
    <div id="app">
        <div id="manjianinfo">
            <div class="shoppage">
                <div class="shoplist">
                    <div class="layui-bg-gray layui-row"  style="height: 36px;line-height: 36px;padding-left: 20px;border-left: 4px solid #009688 ">
                        <div class="layui-col-md8">店铺列表</div>
                        <div class="layui-col-md4" style="height: 36px;line-height: 36px;">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" style="display: none" id="shopNumBtn">
                                {{ shopNum }}
                            </button>
                        </div>
                    </div>

                    <div class="shopname layui-row" v-for="(shop,index) in shopList" :class="active == index ? 'active-shop' : '' ">
                        <div class="layui-col-md1">{{ shop.id }}</div>
                        <div class="layui-col-md10" @click="getMenu(shop.shopId, index)">{{ shop.shopName }}</div>
                        <div class="layui-col-md1"><i class="layui-icon layui-icon-flag" style="font-size: 14px; color: #009688;" v-if="shop.saveFlag == 1" ></i> </div>
                    </div>

                </div>
            </div>
            <div class="shops">
                <div class="nav layui-row">
                    <div class="layui-col-md10">
                        <input type="text"  style="border-bottom-right-radius: 0px; border-top-right-radius: 0px" placeholder="请输入店铺名" autocomplete="off" class="layui-input" id="shopinput">
                    </div>
                    <div class="layui-col-md1" style="text-align: left">
                        <button type="button" class="layui-btn" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                    <div class="layui-col-md1">
                        <button type="button" @click="saveshop" class="layui-btn">保存</button>
                    </div>
                </div>
                <div class="shop">
                    <div class="layui-row shop-titles layui-bg-gray" >
                        <div class="layui-col-md3 shop-title" style="font-weight: 600;padding-left: 20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">{{ menuList.shopName }}</div>
                        <div class="layui-col-md4 shop-title" style="text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"><i class="layui-icon" style="font-size: 14px;">&#xe715;</i> {{ menuList.address }}</div>
                        <div class="layui-col-md2 shop-title">配送费: {{ menuList.shippingFee }} 元</div>
                        <div class="layui-col-md2 shop-title">起送费: {{ menuList.minPrice }} 元</div>
                        <div class="layui-col-md1 shop-title"></div>
                    </div>
                    <div class="plans">
                        <div class="plan" v-for="(menu,index) in menuList.menuList">
                            <div class="plan-menu layui-row" >
                                <div class="layui-col-md1  ">方案{{ index + 1 }}</div>
                                <div class="layui-col-md11 " style="text-align: left !important; padding-right: 10px;">{{ menu.menu }}</div>
                            </div>
                            <div class="plan-price layui-row" >
                                <div class="layui-col-md3 ">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" @click="deleteMenu(index)">
                                        <i class="layui-icon">&#xe640;</i>
                                    </button>
                                </div>
                                <div class="layui-col-md3 ">
                                </div>
                                <div class="layui-col-md2 ">总价(含包装费): {{ menu.totalPrice }}元</div>
                                <div class="layui-col-md2 ">门店新客立减: {{ menuList.newUserReduceFee }}元</div>
                                <div class="layui-col-md2" style="font-weight: 500;">实付: {{ menu.outOfPacket }} 元</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="limitpages"></div>
            </div>
        </div>
    </div>
</body>
    <script type="text/javascript">
        window.onload=function(){

        }

        new Vue({
            el:'#app',
            data:{
                shopList : [],
                shopNum : 0,
                menuList : [],
                active : -1,
                shopId : 0,
                shopIndex : -1,

            },
            created(){
                var that = this
                axios({
                    method:'get',
                    url: 'http://admin.qitianmeishi.com:7747/manjian/getShopList',
                    params:{
                        page : 1,
                    },
                }).then(function(response) {
                    result = response.data
                    console.log(result);
                    that.shopList = result.shopList
                    that.shopNum = result.shopNum

                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'limitpages',
                            count: that.shopNum,
                            limit: 15,
                            groups: 5,
                            jump: function(obj, first){
                                console.log(obj.curr);
                                console.log(obj.limit);
                                if(!first){
                                    axios({
                                        method:'get',
                                        url: 'http://admin.qitianmeishi.com:7747/manjian/getShopList',
                                        params:{
                                            page : obj.curr,
                                        },
                                    }).then(function(response) {
                                        result = response.data
                                        console.log(result);
                                        that.shopList = result.shopList
                                        that.shopNum = result.shopNum
                                    });
                                }
                            },
                        });
                    });

                });

            },
            methods :{
                getMenu:function (id, index) {
                    this.active = index
                    this.shopId = id
                    this.shopIndex = index
                    var that = this

                    layui.use('layer', function() {
                        var layer = layui.layer;
                        var index = layer.load(1);
                        axios({
                            method:'get',
                            url: 'http://admin.qitianmeishi.com:7747/manjian/getMenu',
                            params:{
                                id : id,
                            },
                        }).then(function(response) {
                            result = response.data;
                            console.log(result);
                            layer.close(index);
                            that.menuList = result;
                        });


                    });

                },
                deleteMenu:function(menuindex){
                    var that = this
                    layui.use('layer',function (){
                        var layer = layui.layer;
                        layer.open({
                            content: '请确认是否删除'
                            ,btn: ['删除', '取消']
                            ,yes: function(index, layero){
                                console.log("删除")
                                that.menuList.menuList.splice(menuindex, 1)
                                layer.close(index)
                            }
                            ,btn2: function(index, layero){

                            }
                            ,cancel: function(){
                            }
                        });
                    });




                },
                saveshop:function(){
                    var that = this
                    this.shopList[this.shopIndex].saveFlag = 1
                    console.log(this.menuList)
                    axios({
                        method:'get',
                        url: 'http://47.94.138.204/api/v1/manjian/saveMenu',
                        params:{
                            menuList : that.menuList,
                        },
                    }).then(function(response) {
                        result = response.data;
                        console.log(result);

                        if (result.code == 200){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg('保存成功');
                            });
                        }

                    });
                },
            },
            components:{

            }
        });
    </script>
</html>